<template>
  <el-drawer
    :visible.sync="drawerVisible"
    title="导出上线平台"
    size="60%"
    direction="rtl"
    :close-on-press-escape="false"
    custom-class="tag-drawer platform-download-drawer"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    @closed="clearDrawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" :rules="editFormRules" label-width="90px" ref="editForm">
          <el-form-item prop="type" label="导出类型">
            <el-radio-group v-model="editForm.type">
              <el-radio :label="1">导出空模板</el-radio>
              <el-radio :label="2">按标签导出</el-radio>
              <el-radio :label="3">导出全部</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-show="editForm.type === 2">
            <el-form-item label="选择标签">
              将导出所选标签的全部上线平台
            </el-form-item>
            <tag-content-header search refresh @toolFun="toolFun" :settingData="columns"></tag-content-header>
            <tag-table
              ref="table"
              @refresh="getList"
              :data="dataList"
              :loading="loading"
              :columns="columns"
              :params="params"
              :total="totalSize"
              :selection="true"
              rowKey="tagId"
            >
              <template #requirerNnm="{ scope }">
                {{ $name(scope.row, 'requirerNnm', 'requirer') }}
              </template>
              <template #tagStatus="{ scope }">
                <span class="circle" :class="{ red: scope.row.tagStatus === '0' }"></span>
                {{ scope.row.tagStatus === '0' ? '延期' : '正常' }}
              </template>
              <template #handlerNnm="{ scope }">
                {{ $name(scope.row, 'handlerNnm', 'handler') }}
              </template>
            </tag-table>
            <el-form-item label="已选标签" v-if="showTable">
              <ul class="clearfix select-tag">
                <li v-for="item in selectTag" :key="item.tagId">{{ item.tagNm }}</li>
              </ul>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose()">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '状态',
          prop: 'tagStatus'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      editForm: {
        type: 1
      },
      editFormRules: {
        type: [{ required: true, message: '导出类型不能为空', trigger: 'change' }]
      },
      showTable: false
    }
  },
  watch: {
    'editForm.type'(val) {
      if (val === 2) this.$nextTick(() => (this.showTable = true))
      else this.showTable = false
    }
  },
  computed: {
    selectTag() {
      return this.$refs.table.getSelectList()
    }
  },
  methods: {
    showDrawer() {
      this.getList()
      this.drawerVisible = true
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('auth/admin/tagRolloutPlfmDownloadList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    beforeClose() {
      this.drawerVisible = false
    },
    submit() {
      if (this.editForm.type === 1) {
        // 下载空模板
        this.downloadEmpty()
      } else {
        let ids = []
        if (this.editForm.type === 2) {
          let list = this.$refs.table.getSelectList()
          if (!list.length) {
            this.$message.error('请选择标签')
            return
          } else {
            list.forEach(item => {
              ids.push(item.tagId)
            })
          }
        }
        this.$ajax({
          url: this.$ajax.setUrl('auth/admin/downloadRolloutPlfm'),
          method: 'post',
          data: this.$ajax.setData({
            tagList: ids
          })
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$dlFile(data.data)
            this.drawerVisible = false
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      }
    },
    downloadEmpty() {
      this.$ajax({
        url: this.$ajax.setUrl('stg/stgStdFile/import/tmpl'),
        method: 'get',
        params: this.$ajax.setParams({
          tmplId: 8
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data.fileId)
          this.drawerVisible = false
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clearDrawer() {
      this.$refs.table.clearSelect()
      this.$refs.table.clearAllSearch()
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      }
      this.totalSize = 0
      this.editForm.type = 1
    }
  }
}
</script>

<style lang="scss">
.platform-download-drawer {
  .tag-content-header {
    margin-top: -30px;
  }
  .el-pagination__editor.el-input {
    width: 50px !important;
  }
  .el-pagination__sizes {
    .el-select,
    .el-input {
      width: 100px !important;
    }
  }
  .select-tag {
    margin-top: 20px;
    li {
      float: left;
      height: 40px;
      padding: 0 20px;
      border: 1px dotted $border-color;
      margin: 0 10px;
      line-height: 40px;
    }
  }
}
</style>
